<d-button (btnClick)="getCheckedRows()">Get CheckedRows</d-button>
<d-data-table
  [dataSource]="sortableDataSource"
  [onlyOneColumnSort]="true"
  [(multiSort)]="sortedColumn"
  [scrollable]="true"
  [resizeable]="true"
  (multiSortChange)="multiSortChange($event)"
  (pageIndexChange)="changePageContent($event)"
  (resize)="onResize($event)"
  [checkable]="true"
  [hideColumn]="hideColumn"
  [showSortIcon]="true"
  (cellClick)="cellClick($event)"
  (cellDBClick)="cellDBClick($event)"
  (rowDBClick)="rowDBClick($event)"
  (rowClick)="rowClick($event)"
  [tableOverflowType]="'overlay'"
>
  <d-column field="$index" header="#" [width]="'10%'"></d-column>
  <d-column
    field="firstName"
    header="First Name"
    [sortable]="true"
    [width]="'20%'"
    [filterable]="true"
    [closeFilterWhenScroll]="true"
    [filterList]="filterListMulti"
    [beforeFilter]="beforeFilter"
    [extraFilterTemplate]="extraFilterTemplate"
    (filterChange)="filterChangeMultiple($event)"
    (filterToggle)="onToggle($event)"
  ></d-column>
  <d-column
    field="lastName"
    header="Last Name"
    [sortable]="true"
    [width]="'20%'"
    [minWidth]="'100px'"
    [filterable]="true"
    [closeFilterWhenScroll]="true"
    [filterIconActive]="filterIconActive"
    [customFilterTemplate]="customFilterTemplate"
  ></d-column>
  <d-column
    field="gender"
    header="Gender"
    [sortable]="true"
    [width]="'20%'"
    [filterable]="true"
    [filterMultiple]="false"
    [filterList]="filterList2"
    (filterChange)="filterChangeRadio($event)"
  ></d-column>
  <d-column
    field="dob"
    header="Date of birth"
    [fieldType]="'date'"
    [extraOptions]="{ dateFormat: 'MM-dd-yyyy' }"
    [width]="'20%'"
  ></d-column>
  <d-column field="description" header="description" [width]="'20%'"></d-column>
  <d-column field="hidden" header="hidden" [width]="'20%'">hidden</d-column>
</d-data-table>
<ng-template #extraFilterTemplate let-checked="checked" let-halfChecked="halfChecked">
  <span>{{ checked ? 'All selected' : halfChecked ? 'Some selected' : ' None selected' }}</span>
</ng-template>
<ng-template #customFilterTemplate let-filterList="filterListDisplay" let-dropdown="dropdown" let-column="column">
  <div class="custom-filter-content">
    <div class="filter-options">
      <div *ngFor="let item of checkboxList" class="checkbox-group">
        <d-checkbox
          [label]="item.lastName"
          [(ngModel)]="item.chosen"
          [labelTemplate]="myCheckbox"
          (change)="onCheckboxChange($event, item.lastName)"
        >
          <ng-template #myCheckbox let-label="label">
            <d-avatar [name]="label" [width]="16" [height]="16"></d-avatar>
            <span class="label-style">{{ label }}</span>
          </ng-template>
        </d-checkbox>
      </div>
    </div>
    <div class="line"></div>
    <div>
      <span class="button-style" style="border-right: 1px solid #e8f0fd; margin-left: 10px" (click)="filterSource(dropdown)">CONFIRM</span>
      <span class="button-style" (click)="cancelFilter(dropdown)">CANCEL</span>
    </div>
  </div>
</ng-template>
<p style="margin-top: 20px">Current Sort parameters:</p>
<pre>{{ sortedColumn | json }}</pre>
